<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Menu Example</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav class="menu__wrapper">
            <div class="logo__wrapper">
                <a
                    href="#"
                    title="Logo"
                    class="logo"
                >
                    <!-- svg -->
                </a>
                <a href="#" class="page__title">
                    Dashboard
                </a>
            </div>
            <div class="action-buttons">
                <!-- more actions -->
                <button class="action-button">
                    <span class="notification-mark"></span>
                    <!-- svg -->
                </button>
                <img 
                    id="avatar-navbar" class="avatar-profile" 
                    src="assets/profile.jpg" alt="Profile"
                >
            </div>
        </nav>
        <div class="navigation__menu none">
            <div class="avatar-wrapper">
                <img 
                    class="avatar-profile" src="assets/profile.jpg" 
                    alt="Profile"
                >
                <div class="avatar-name-wrapper">
                    <div class="avatar-name-alias">a7v8x</div>
                    <div class="avatar-name">David Mraz</div>
                </div>
                <div class="close-button">
                    <!-- svg -->
                </div>
            </div>
            <ul class="navigation__menu__items">
                <li>
                    &#128640; Maximizing the reward function
                </li>
                <li class="separator">
                    <hr>
                </li>
                <li>
                    <!-- svg -->
                    Your Profile
                </li>
                <!-- more items -->
            </ul>
        </div>
        <script src="script.js"></script>
    </body>
</html>

